<template>
  <el-container class="home_container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <span>共享资源后台</span>
      </div>
      <el-menu background-color="#23262e" class="el-menu-demo" mode="horizontal" text-color="#fff" active-text-color="#fff" router :default-active='asideNavUrl'>
        <el-submenu index="2">
          <template slot="title"><span>你好</span><i class="el-icon-sunny"></i>
            <span v-if="this.userinfo.role == 'admin'">管理员</span>
            <span v-else>尊敬的用户</span>
          </template>
          <el-menu-item index="2-0">
            <i class="el-icon-house"></i>
            前往首页
          </el-menu-item>
          <el-menu-item index="/userpi">
            <i class="el-icon-user"></i>
            个人主页
          </el-menu-item>
          <el-menu-item index="2-2" @click="loginOut">
            <i class="el-icon-switch-button"></i> 退出
          </el-menu-item>
        </el-submenu>
        <!-- <el-button class="loginoutcss" type="text" @click="loginOut">退出</el-button> -->
      </el-menu>
    </el-header>
    <el-container>
      <!-- 左侧导航 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <div class="hcollapse_menu" @click="collapseBtn()">|||</div>
        <el-menu background-color="#393d49" text-color="#fff" active-text-color="#409eff" unique-opened :collapse='iscollapse' :collapse-transition='false' router :default-active='asideNavUrl'>
          <!-- 一级标题 -->
          <el-menu-item index="/bigdata">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">仪表盘</span>
          </el-menu-item>
          <!-- 一级标题 -->
          <el-menu-item index="/resourceclass">
            <i class="el-icon-s-flag"></i>
            <span slot="title">资源分类</span>
          </el-menu-item>
          <!-- 一级导航 -->
          <el-submenu :index="firstItem.id + ''" v-for="firstItem in navitemlist" :key="firstItem.id">
            <template slot="title">
              <i :class="firstItem.navicons"></i>
              <span slot="title">{{firstItem.authName}}</span>
            </template>
            <!-- 二级标题 -->
            <el-menu-item :index=" '/'+secondItem.path" v-for="secondItem in firstItem.children" :key="secondItem.id">
              <template slot="title">
                <i :class="secondItem.childrenIcon"></i>
                <span>{{secondItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 一级标题 -->
          <el-menu-item index="/commentfun">
            <i class="el-icon-chat-line-square"></i>
            <span slot="title">评论</span>
          </el-menu-item>
          <!-- 一级标题 -->
          <el-menu-item index="/usermanagement" v-show="userinfo.role === 'admin' ? true : false">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <!-- 一级导航 -->
          <el-submenu v-show="userinfo.role == 'admin' ? true : false" :index="firstItem.id + ''" v-for="firstItem in navwebsetuplist" :key="firstItem.id">
            <template slot="title">
              <i :class="firstItem.navicons"></i>
              <span slot="title">{{firstItem.authName}}</span>
            </template>
            <!-- 二级标题 -->
            <el-menu-item :index=" '/'+secondItem.path" v-for="secondItem in firstItem.children" :key="secondItem.id">
              <template slot="title">
                <i :class="secondItem.childrenIcon"></i>
                <span>{{secondItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容 -->
      <el-main id="home_mainbox">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      navitemlist: [
        {
          id: 2,
          authName: '发布资源',
          navicons: 'el-icon-tickets',
          children: [
            { id: '2_1', authName: '所有资源', childrenIcon: 'el-icon-s-order', path: 'allresources' },
            { id: '2_2', authName: '发布资源', childrenIcon: 'el-icon-s-promotion', path: 'pubresources' }
          ]
        }
      ],
      navwebsetuplist: [
        {
          id: 6,
          authName: '网站设置',
          navicons: 'el-icon-set-up',
          children: [
            { id: '6_1', authName: '网站设置', childrenIcon: 'el-icon-set-up', path: 'webset' },
            { id: '6_2', authName: '轮播图', childrenIcon: 'el-icon-data-board', path: 'allbgimg' }
          ]
        }
      ],
      iscollapse: false,
      asideNavUrl: ''
    }
  },
  created() {
    this.getUserList()
    this.getuserbyid()
  },
  mounted() {
    const maxhight = document.body.clientHeight - 60
    document.getElementById('home_mainbox').style.height = maxhight + 'px'
  },
  methods: {
    // 获取用户信息
    getUserList() {
      this.userinfo = JSON.parse(sessionStorage.getItem('myuser'))
    },
    // 根据id查询用户
    async getuserbyid() {
      var that = this
      const uid = this.userinfo._id
      // console.log(uid)
      await this.$http.get('/users/' + uid).then((res) => {
        // console.log(res)
        window.sessionStorage.setItem('myuser', JSON.stringify(res.data))
      }).catch((err) => {
        const messg = err.response.data.message
        // console.log(err.response.data)
        that.$message({
          showClose: true,
          message: messg,
          type: 'error'
        })
      })
    },
    // 退出功能
    async loginOut() {
      const res = await this.$http.post('/logout')
      if (res.status !== 200) {
        this.$message({
          showClose: true,
          message: '退出失败！',
          type: 'error'
        })
      }
      this.$message({
        showClose: true,
        message: '退出成功！',
        type: 'success'
      })
      window.sessionStorage.clear()
      this.$router.push('/mylogin')
    },
    // 点击折叠导航
    collapseBtn() {
      // var user = sessionStorage.getItem('user')
      // console.log(user)
      this.iscollapse = !this.iscollapse
    }
  }
}
</script>
<style lang="less" scoped>
.home_container{
  height: 100%;
}
.el-header{
  background-color: #23262e;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #ffffff;
  > div {
    display: flex;
    justify-content: space-between;
    > span {
      padding-left: 20px;
    }
  }
}

.home_container .el-menu-demo {
  border-bottom:  #23262e;
}

.loginoutcss {
  margin-right: 40px;
  color: #ffffff;
}

.el-aside{
  background-color: #393d49;
  .el-menu {
    border-right: none;
  }
}
.el-main{
  background-color: #f2f3f5;
}

.hcollapse_menu{
  text-align: center;
  line-height: 30px;
  color: #ffffff;
  letter-spacing: 0.2em;
  background-color: #393d49;
}
</style>
